

<template>
    <div class="common" v-loading="loading">
        <div class="breadcrumb">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/article/index' }">文章管理</el-breadcrumb-item>
                <el-breadcrumb-item>{{menu}}</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="backbutton" v-show="bbshow">
                <el-button plain @click="cancelButton()" >返回</el-button>
            </div>
        </div>
        <div class="meta-divder"></div>

        <el-row v-show="showBox === 'search'">
            <el-row class="wdh-search">
                <el-col :span="4">
                    <el-button  type="primary" @click="editArticle()">
                        <i class="fa fa-plus" aria-hidden="true"></i>
                        <span style="margin-left:3px">新增文章</span>   
                    </el-button>
                </el-col>
                <el-col :span="20">
                    <el-row type="flex" :gutter="5" justify="end">                   
                        <el-col :span="4">
                            <el-input v-model="searchParams.title" placeholder="输入文章标题" clearable></el-input>
                        </el-col>
                        <el-col :span="4">
                            <el-select v-model="searchParams.category" clearable placeholder="请选择文章类别">
                                <el-option v-for="v in categoryList" :key="v.id" :label="v.name" :value="v.id"></el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="5">
                          <el-date-picker v-model="searchParams.starttime" type="datetime" placeholder="开始时间" default-time="00:00:00"></el-date-picker> 
                        </el-col>
                        <span class="time-sp">~</span>
                        <el-col :span="6">                     
                          <el-date-picker v-model="searchParams.endtime" type="datetime" placeholder="结束时间" default-time="00:00:00"></el-date-picker>   
                        </el-col>

                        <el-button-group class="wdh-search-button">
                            <el-button type="primary" icon="el-icon-search" ></el-button>
                            <el-button icon="el-icon-refresh"></el-button>
                        </el-button-group>
                    </el-row>
                </el-col>
            </el-row>

            <!--文章列表-->
            <el-row class="wdh-table">
                <el-table :data="articleList" style="width: 100%;">
                    <el-table-column prop="id" label="文章ID" width="120" header-align="center" align="center"></el-table-column>
                    <el-table-column prop="title" label="文章名称" width="200" header-align="center" align="center"></el-table-column>              
                    <el-table-column prop="category" label="文章分类"  width="180" header-align="center" align="center"></el-table-column>
                    <el-table-column prop="tag" label="文章标签" header-align="center" align="center"></el-table-column>
                 
                    <el-table-column fixed="right" label="操作" width="160" header-align="center" align="center">
                            <template slot-scope="scope">
                                <el-row class="operation-btn">
                                    <el-button type="text" size="small" title="编辑" @click="editArticle(scope.row)">
                                        <i class="fa fa-pencil" aria-hidden="true" style="color:#409eff"></i>
                                    </el-button>
                                    <el-button type="text" size="small" title="删除" @click="del(scope.row.id)">
                                        <i class="fa fa-trash" aria-hidden="true" style="color:#ff4d4f"></i>
                                    </el-button>
                                                   
                                </el-row>
                            </template>

                    </el-table-column>
                </el-table>
                <!--加载分页组件-->
                <v-page @getTable="getArticleList" v-bind:pagination="pagination"></v-page>                      
            </el-row>


        </el-row>

                <!--新增/编辑-->
        <el-row class="wdh-edit" v-show="showBox === 'edit'">
            <el-form ref="editForm" :model="editForm" label-width="110px" class="wdh-edit-content">
                <el-input v-model="editForm.id" v-show="false"></el-input>
                
                <el-form-item label="文章标题" prop="title">
                    <el-col :span="10">
                        <el-input v-model="editForm.title" placeholder="请填写文章标题"></el-input>
                    </el-col>
                </el-form-item>


                <el-form-item label="文章内容" prop="content">
                    <el-col :span="20">
                       <weditor></weditor>
                    </el-col>
                </el-form-item>
               
                          
                <el-form-item label="文章图片" prop="img">
                    <div class="de-body">
                        <el-upload
                        class="avatar-uploader"
                        action="/api/common/imgup"
                        :show-file-list="false"
                        :on-success="imgUploadSuccess"
                        :before-upload="beforeImgUpload">
                        <img v-if="editForm.imgUrl" :src="editForm.imgUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>

                    </div>
                    
                </el-form-item>

                <el-form-item label="文章类别" prop="category">
                    <el-select v-model="editForm.category" clearable placeholder="请选择文章类别">
                        <el-option v-for="v in categoryList" :key="v.id" :label="v.name" :value="v.id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="文章标签" prop="tag">
                    <el-col :span="20">
                        <el-tag
                        :key="tag"
                        v-for="tag in dynamicTags"
                        closable
                        :disable-transitions="false"
                        @close="handleClose(tag)">
                        {{tag}}
                        </el-tag>
                        <el-input
                        class="input-new-tag"
                        v-if="inputVisible"
                        v-model="inputValue"
                        ref="saveTagInput"
                        size="small"
                        @keyup.enter.native="handleInputConfirm"
                        @blur="handleInputConfirm"
                        >
                        </el-input>
                        <el-button v-else class="button-new-tag" size="small" @click="showInput" v-show="but_show">+ New Tag</el-button>
                    </el-col>
                </el-form-item>

            </el-form>
            <div class="common-button">
                <el-button plain @click="cancelButton()">取消</el-button>
                <el-button type="primary" @click="submitButton">保存</el-button>
            </div>
        </el-row>
               
    </div>
</template>


<script>
import Weditor from '../../components/WangeditorComponent.vue';
    export default {
        data() {
            return {
                showBox:'search',
                loading:false,
                bbshow:false,
                but_show:true,
                menu:'文章列表',


                searchParams:{
                    title:'',
                    category:'',
                    starttime:'',
                    endtime:''
                },
                pagination:{
                    current_page: 1,
                    page_sizes: [10, 20, 30, 40],
                    limit: 10,
                    total: 0
                },
                categoryList:[],
                articleList:[{
                    id:1,
                    title:'lala',
                    category:'heh',
                    tag:'lala'
                },{
                    id:1,
                    title:'lala',
                    category:'heh',
                    tag:'lala'
                }],

                editForm:{
                    id:0,
                    title:'',
                    content:'',
                    imgUrl:'',
                    category:'',
                    tag:''

                },

                upload: {
                    _token: window.csrf_token,
                },

                dynamicTags: [],
                inputVisible: false,
                inputValue: '',

            
            }
        },
        components:{
            Weditor
        },
        mounted(){
            this.getCategory();

        },
        methods: {

            //获取文章类别
            getCategory(){
                 window.axios.get('/api/category/cateArr').then((res) => {
                    
                    if (res.data.code == 200) {
                        this.categoryList = res.data.data;
                        
                    } else {
                        this.$message(res.data.msg);
                    }
                });

            },

            //获取文章列表内容
            getArticleList(){

            },

            
            //删除
            del(id){

            },
            //新增 编辑
            editArticle(row){
                this.showBox = 'edit';
                this.bbshow = true;

                if(row){
                    this.menu = '文章编辑';
                    this.editForm = {
                        id:row.id,
                        title:row.title,
                        content:row.content,
                        imgUrl:row.img,
                        category:row.category,
                        tag:row.tag
                    };
                }else{
                    this.menu = '文章添加';
                }

            },

            //取消
            cancelButton(){
                this.showBox = 'search';
                this.bbshow = false;
                  
                this.editForm = {
                    id:0,
                    title:'',
                    content:'',
                    imgUrl:'',
                    category:'',
                    tag:''
                };
                this.$refs.editForm.clearValidate(); 

            },

            //保存
            submitButton(){

            },

            //图片上传
            imgUploadSuccess(res, file) {
                this.editForm.imgUrl = URL.createObjectURL(file.raw);
            },

            beforeImgUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },

            handleClose(tag) {
                this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
                if(this.dynamicTags.length < 3){
                    this.but_show = true;
                }
            },

            showInput() {
                this.inputVisible = true;
                this.$nextTick(_ => {
                this.$refs.saveTagInput.$refs.input.focus();
                });
            },

            handleInputConfirm() {
                let inputValue = this.inputValue;
                if (inputValue) {
                this.dynamicTags.push(inputValue);
                }
                if(this.dynamicTags.length > 2){
                    this.but_show = false;
                } 

                this.inputVisible = false;
                this.inputValue = '';

            },



        },
    }
</script>
<style>

    .common{     
        border-radius: 10px;
        background: #fff;
        margin: 10px;
        box-shadow: 1px 3px 7px 0 rgb(12 64 168 / 20%);
    }

    .breadcrumb{
        padding:20px;
        color:#666;
    }
    .backbutton{
        position: relative;
        float: right;
        top: -25px;
        right: 50px;
    }
    
    .is-link{
        color:#666!important;
    }
    .el-breadcrumb__item:hover  .is-link{
        color:#409EFF!important;
    }
    .meta-divder{
        font-weight: 400;
        font-size: 1rem;
        border-top: 1px solid #d3e0e9;
        border-bottom: 1px solid rgba(211,224,233,.15);
        margin: 1rem 0;
        line-height: 1;
        margin:0 20px;
    }
    .common-button{
        margin-bottom: 25px;
        background-color: #f2f7fa;
        width: 100%;
        text-align: center;
        height: 50px;
    }
    .time-sp{
        padding-top: 10px;
        padding-left: 5px;
        padding-right: 1px;
        color: #74819b;
    }

    .el-tag + .el-tag {
        margin-left: 10px;
    }
    .button-new-tag {
        margin-left: 10px;
        height: 32px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
    }
    .input-new-tag {
        width: 90px;
        margin-left: 10px;
        vertical-align: bottom;
    }

    .w-e-text-container{
        height:800px!important;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 250px;
        height: 170px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 250px;
        height: 170px;
        display: block;
    }
   

    
</style>